<!--
 * @Author: 刘翔
 * @Date: 2025-07-29 14:37:00
 * @LastEditTime: 2025-08-28 16:41:24
 * @LastEditors: your name
 * @Description:页面组合2(运营趋势)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType2.vue
-->
<template>
  <div class="page-type-2">
    <MixedChart style="margin-bottom: 50px" ref="chart1" v-bind="getChartProps1()" />
    <BarChart style="margin-bottom: 30px" v-if="getChartProps2()" ref="chart2" v-bind="getChartProps2()" />
    <div class="card-box-container" v-if="desc && Object.keys(desc).length">
      <CardBox v-for="(item, index) in cardData" :key="index">
        <template #left>
          <img v-if="desc[item.key] > 0" class="upward-img" src="../img/upward.png" alt="" />
          <img v-else class="downward-img" src="../img/downward.png" alt="" />
        </template>
        <template #right>
          <span class="card-box-right-item-1">{{ item.text }}</span>
          <span class="card-box-right-item-2">{{ desc[item.key] }}</span>
          <div class="card-box-right-item-3">{{ desc[item.describe] }}</div>
        </template>
      </CardBox>
    </div>
  </div>
</template>

<script>
import MixedChart from '../components/MixedChart.vue';
import BarChart from '../components/BarChart.vue';
import CardBox from '../components/cardBox.vue';
export default {
  name: 'pageType2',
  components: {
    MixedChart,
    BarChart,
    CardBox,
  },
  props: {
    chartList1: {
      type: Object,
      default: () => {},
    },
    chartList2: {
      type: Object,
      default: () => {},
    },
    //描述
    desc: {
      type: [Object, String],
      default: () => {},
    },
    //卡片数据
    cardData: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    //获取图表配置
    getChartProps1() {
      return {
        // 主系列数据
        primaryData: {
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[0]]),
        },
        // 次系列数据
        secondaryData: {
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[1]]),
        },
        // 系列类型
        seriesTypes: {
          primary: 'line',
          secondary: 'line',
        },
        //是否共用Y轴
        shareYAxis: false,
        // 图例配置
        legend: {
          data: this.chartList1.keyList,
        },
        // 图表配置
        chartConfig: {
          height: 300,
          // 图例配置
          legend: {
            data: this.chartList1.keyList,
          },
          // 网格配置
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
          },
          // 坐标轴配置
          axis: {
            // 分类轴配置
            category: {
              axisLabel: {
                color: '#333',
                fontSize: 18,
              },
              nameLocation: 'middle',
              nameGap: 30,
            },
            // 主值轴配置（CMI）
            primary: {
              name: this.chartList1.keyList[0],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList1.colors[0],
                fontSize: 18,
              },
              nameTextStyle: {
                color: this.chartList1.colors[0],
                fontSize: 12,
              },
            },
            // 次值轴配置（均次费用）
            secondary: {
              name: this.chartList1.keyList[1],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList1.colors[1],
                fontSize: 18,
              },
              nameTextStyle: {
                color: this.chartList1.colors[1],
                fontSize: 12,
              },
            },
          },
          // 系列配置
          series: {
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
            },
            // 主系列配置
            primary: {
              name: this.chartList1.keyList[0],
              itemStyle: {
                color: this.chartList1.colors[0],
              },
            },
            // 柱状图通用配置
            bar: {
              barWidth: '40%',
              itemStyle: {
                color: this.chartList1.colors[0],
              },
            },
            // 次系列配置
            secondary: {
              name: this.chartList1.keyList[1],
              itemStyle: {
                color: this.chartList1.colors[1],
              },
            },
            // 折线图通用配置
            line: {
              itemStyle: {
                color: this.chartList1.colors[1],
              },
              lineStyle: {
                width: 2,
              },
              smooth: true,
            },
          },
        },
        pptOptions: {
          // 图表位置和大小
          position: {
            x: 0.5,
            y: 1.0,
            w: 9,
            h: 1.5,
          },
          // 标题配置
          title: {
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            // 图例配置
            showLegend: true,
            legendPos: 'b',
            // 分类轴配置
            catAxes: [{ catAxisTitle: this.chartList1.XShow }, { catAxisHidden: true }],
            dataLabelFormatCode: [`[黑色],##0.00`, `[黑色],##0.00`],
            // 显示数据标签
            showValue: true,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            // 值轴配置
            values: [
              {
                // 主值轴标题
                showValAxisTitle: false,
              },
              {
                // 次值轴标题
                showValAxisTitle: false,
              },
            ],
          },
        },
      };
    },
    getChartProps2() {
      return {
        title: '',
        categories: this.chartList2.data.map(item => item[this.chartList2.XShow]),
        values: this.chartList2.data.map(item => item[this.chartList2.keyList[0]]),
        seriesName: this.chartList2.keyList[0],
        color: this.chartList2.colors[0],
        smooth: true,
        chartConfig: {
          height: 300,
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: '{b}: {c}',
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
          },
          xAxis: {
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 18,
              formatter: '{c}',
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 0.5,
            y: 2.5,
            w: 9,
            h: 1.5,
          },
          // 标题配置
          title: {
            x: 7,
            y: 2,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: true,
            legendPos: 'b',
            showTitle: false,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //显示值
            showValue: true,
            dataLabelPosition: 'outEnd',
            dataLabelFormatCode: `[${this.chartList2.data.map(item => item[this.chartList2.keyList[0]]).every(item => item < 0) ? '红色' : '黑色'}],##0.00`,
          },
        },
      };
    },
    /**
     * 导出为PPT
     * @description 将页面中的所有图表导出到PPT
     * @param {Object} pptx pptxgen实例
     * @param {Object} slide 当前幻灯片实例
     */
    exportToPPT(pptx, slide) {
      this.$refs.chart1.exportToPPT(pptx, slide);
      this.$refs.chart2.exportToPPT(pptx, slide);
      //卡片数据导出
      if (this.desc && Object.keys(this.desc).length) {
        this.cardData.forEach((item, index) => {
          //卡片
          slide.addText(
            [
              {
                text: `                ${item.text}`,
                options: {
                  fontSize: 12,
                  color: '363636',
                },
              },
              {
                text: `  ${this.desc[item.key]}`,
                options: {
                  fontSize: 12,
                  color: 'ee6666',
                  breakLine: true,
                },
              },
              {
                text: `                ${this.desc[item.describe]}`,
                options: {
                  fontSize: 12,
                  color: '363636',
                },
              },
            ],
            {
              shape: pptx.shapes.ROUNDED_RECTANGLE,
              x: item.x,
              y: item.y,
              w: 2.5,
              h: 1.1,
              rectRadius: 0.2,
              //边框
              line: { color: '151515', width: 0.5 },
              fill: { color: 'fff2ca' },
            }
          );
          //大于0
          if (this.desc[item.key] > 0) {
            slide.addImage({ x: item.arrowX, y: item.arrowY, w: 0.5, h: 0.5, path: require('../img/upward.png'), objectName: 'animated gif' });
          } else {
            slide.addImage({ x: item.arrowX, y: item.arrowY, w: 0.5, h: 0.5, path: require('../img/downward.png'), objectName: 'animated gif' });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page-type-2 {
  height: 100%;
  .card-box-container {
    display: flex;
    width: 100%;
    height: 220px;
    .downward-img {
      width: 100px;
      height: 100px;
    }
    .upward-img {
      width: 100px;
      height: 100px;
    }
    .card-box-right-item-1 {
      font-size: 2rem;
    }
    .card-box-right-item-2 {
      padding: 0 10px;
      font-size: 2rem;
      color: #f36868;
    }
    .card-box-right-item-3 {
      font-size: 2rem;
    }
  }
}
</style>
